<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>容器环境管理</el-breadcrumb-item>
      <el-breadcrumb-item>容器信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" >
      <el-row :gutter="20">
        <el-col :span="6" style="line-height: 60px;">
          <el-input placeholder="请输入容器Tag" style="width: 400px" v-model="input1">
            <el-button @click="FilterData(input1)" slot="append" style="background-color: cornflowerblue;color: white" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                style="width: 100%;
                margin-top: -10px;line-height: 70px;"

      >
        <el-table-column prop="ContainerEnv" label="容器环境">
        </el-table-column>
        <el-table-column prop="RunUser" label="运行人员">
        </el-table-column>
        <el-table-column prop="ContainerProject" label="项目名称">
        </el-table-column>
        <el-table-column prop="ContainerTag" label="容器Tag">
        </el-table-column>
        <el-table-column prop="ContainerName" label="容器名称" width="200px;">
        </el-table-column>
        <el-table-column prop="ContainerPort" label="容器端口">
        </el-table-column>
        <el-table-column prop="ContainerNode" label="节点地址">
        </el-table-column>
        <el-table-column prop="CreateAt" label="运行时间">
          <template slot-scope="scope">
            <p>{{ scope.row.CreatedAt | getMoment }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="CreateAt" label="更新时间">
          <template slot-scope="scope">
            <p>{{ scope.row.UpdatedAt | getMoment }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="ContainerStatus" label="状态" width="70px;">
          <template slot-scope="scope">
            <p class="el-icon-success" v-if="scope.row.ContainerStatus"></p>
            <p class="el-icon-error" v-else></p>
<!--                <p>-->
<!--                  {{ scope.row }}-->
<!--                </p>-->
          </template>
        </el-table-column>
        <el-table-column prop="ContainerAttach" label="容器终端">
          <template slot-scope="scope">
            <el-button @click="ToAttachContainer(scope.row.WettyPort,scope.row.ContainerNode)" type="primary" icon="el-icon-share" ></el-button>
<!--            <el-button type="primary" icon="el-icon-share" ><a href="172.18.2.224:51261"></a></el-button>-->
          </template>
        </el-table-column>
        <el-table-column prop="deleteContainer" label="续期">
          <template slot-scope="scope">
            <el-popconfirm
              @confirm="ContainerRollover(scope.row.ContainerName)"
              confirm-button-text='确定'
              cancel-button-text='取消'
              title="要为此容器续期吗？">
              <el-button slot="reference" type="primary">续期</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
        <el-table-column prop="deleteContainer" label="容器删除">
          <template slot-scope="scope">
            <el-popconfirm
              @confirm="ContainerDelete(scope.row.ContainerName,scope.row.ContainerNode,scope.row.ContainerIds,
              scope.row.ContainerEnv, scope.row.ContainerTag, scope.row.ContainerProject,scope.row.RunUser)"
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="确定删除此容器吗？">
              <el-button slot="reference" type="danger" icon="el-icon-delete" circle></el-button>
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top:15px;">
        <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[1,5,10,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
<!--          <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[1,5,10,20]" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="tableData.length">-->
        </el-pagination>
      </div>
    </el-card>
    <div v-show="loading" style="position: fixed; left: 0; right: 0; top: 0; bottom: 0;background: rgba(0, 0, 0, .1);font-size: 47px;">
      <i class="el-icon-loading" style="position: absolute;top: 50%"></i>
    </div>
  </div>
</template>

<script>
  import { getMoment } from '../utils/timeFilter'
  import axios from 'axios'

  export default {
  filters: {
    getMoment
  },
  data: function () {
    return {
      currentPage: 1,
      pageSize: 10,
      loading: false,
      input1: '',
      tableData: []
    }
  },
  mounted () {
    this.loadData()
  },
  methods: {

    loadData: function () {
      axios.get(`${this.cmdbUrl}/containerInfo`).then(
            response => {
              this.tableData = response.data.data
              console.log(response.data.data)
      })
    },
    ToAttachContainer(wettyport, containerNode) {
      window.location.href = `http://${containerNode}:${wettyport}/`
      // this.$router.replace(`/AttachContainer?containeID=${containeID}&containerNode=${containerNode}`)
    },
    ContainerRollover(containername) {
      axios.put(`${this.cmdbUrl}/containerRollover/${containername}`).then((res) => {
        if (res.status === 200) {
          this.$message({
            showClosetrue: true,
            message: `${containername} 续期成功`,
            type: 'success'
          })
          location.reload()
        } else {
          this.$message({
            showClosetrue: true,
            message: `${containername} 续期失败！！！`,
            type: 'error'
          })
        }
      })
    },
    ContainerDelete(containername, containernode, containerid, envflag, envtag, projectname, runuser) {
      this.loading = true
      axios.delete(`${this.cmdbUrl}/containerDelete/${containername}/${containernode}/${containerid}/${envflag}/${envtag}/${projectname}/${runuser}`).then((res) => {
        if (res.status === 200) {
          this.loading = false
          this.$message({
            showClosetrue: true,
            message: `${containername} 删除成功`,
            type: 'success'
            })
          setTimeout(
            function () {
              location.reload()
            }, 3000
          )
        } else if (res.status === 203) {
          this.loading = false
          this.$message({
            showClosetrue: true,
            message: `${containername} 删除失败！！！`,
            type: 'error'
          })
        }
      })
    },
    FilterData(containertag) {
      axios.get(`${this.cmdbUrl}/queryContainer/${containertag}`).then((res) => {
        this.tableData = res.data.filterdata
        })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.currentPage = 1
      this.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
    }
  }
}
</script>

<style >
  .el-icon-success {
    color: #42b983;
  }
  .el-icon-error {
    color: red;
  }
  .el-loading-spinner{
    font-size: 40px;
  }
  .box-card {
    width: 100%;
    margin-top: 10px;
  }
</style>
